<template>
  <div>
        <el-button type="primary" @click="openFullScreen1" v-loading.fullscreen.lock="fullscreenLoading" style="display:none"></el-button>
    <el-form :inline="true" class="demo-form-inline">
      <div>
       <span @click="backList()" class="backuy"><i class="el-icon-back"></i></span>
                    <el-form-item label="应用类型:">
                        <span>{{currentDetailInfo.contestTypeStr}}</span>
                    </el-form-item>
                    <el-form-item label="应用面信息:">
                        <span v-show="currentDetailInfo.h">H:{{currentDetailInfo.h}}m  &nbsp; </span>
                        <span v-show="currentDetailInfo.w">W:{{currentDetailInfo.w}}m &nbsp; </span>
                        <span v-show="currentDetailInfo.d">D:{{currentDetailInfo.db}}m ~ {{currentDetailInfo.d}}m &nbsp; </span>
                        <span v-show="currentDetailInfo.w1">W1:{{currentDetailInfo.w1}}m &nbsp; </span>
                        <span v-show="currentDetailInfo.w2">W2:{{currentDetailInfo.w2}}m &nbsp; </span>
                    </el-form-item>
                    <el-form-item>
                        <span>{{colorFlag == 1 ? '单白' : '彩色'}}</span>
                    </el-form-item>

                    <!-- <el-form-item label="参考项:" class="wid150">
                      <el-select v-model="chooseEchatType" multiple collapse-tags @change="initData">
                        <el-option v-for="item in echatTypeList" :key="item.value" :label="item.name" :value="item.value">{{item.name}}</el-option>
                      </el-select>
                    </el-form-item> -->
                    </div>
                    <el-form-item label="灯具类型:" class="wid150">
                      <el-select v-model="searchLampType">
                        <el-option
                          v-for="item in lampTypeList"
                          :key="item.id"
                          :label="item.lampName"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="功率≤:" class="wid150">
                      <el-input v-model="searchPower"><i slot="suffix"></i>w</el-input>
                    </el-form-item> -->
                   
                    <div class="xyAxis">
                    <ul>
                      <li>
                        <el-form-item label="X">
                          <el-select v-model="currentX" @change="changeXY" value-key="index">
                            <el-option v-for="item in schema" :label="item.name" :value="item" :key="item.index"></el-option>
                          </el-select>
                          <el-input v-model="xMin"></el-input>
                          ~
                          <el-input v-model="xMax"></el-input>
                        </el-form-item>
                      </li>
                      <li>
                        <el-form-item label="Y">
                          <el-select v-model="currentY" @change="changeXY" value-key="index">
                            <el-option v-for="item in schema" :label="item.name" :value="item" :key="item.index"></el-option>
                          </el-select>
                          <el-input v-model="yMin"></el-input>
                          ~
                          <el-input v-model="yMax"></el-input>
                        </el-form-item>
                      </li>
                    </ul>
                     
			          	</div>
                  <el-form-item>
                      <el-button type="primary" @click="initData()">查询</el-button>
                    </el-form-item>
    </el-form>
    
    <div id="echat_point_other" style="height:580px;width:100%;margin: 0"></div>
  </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      fullscreenLoading:false,
      lampTypeList:[],
      searchLampType:'',
      searchPower:'',
      currentDetailInfo:{},
      ids:'',
      xMin:'',
      xMax:'',
      yMin:'',
      yMax:'',
      echatTypeList: [
        { value: 3, name: "推荐·低" },
        { value: 4, name: "推荐·中" },
        { value: 5, name: "推荐·高" }
      ],
      chooseEchatType: [3, 4, 5],
      schema:[
        { name: "功率(w)", index: 0 },
        { name: "0°(cd)", index: 1 },
        { name: "左60°(cd)", index: 2 },
        { name: "右60°(cd)", index: 3 },
        { name: "上60°(cd)", index: 4 },
        { name: "下60°(cd)", index: 5 }
      ],
      currentX:{ name: "功率(w)", index: 0 },
      currentY:{ name: "0°(cd)", index: 1 },
      myChart:null,
      option:'',
      myData:[],
      dataOther:[],
    };
  },
  props: ["colorFlag", "contestId", "contestTypeStr"],
  methods: {
	  clearSearchParam(){
      this.xMin=''
      this.yMin=''
      this.xMax=''
      this.yMax=''
	  },
	openFullScreen1() {
    	this.fullscreenLoading = true;
	},
    setContestDetetionIds(ids,req){
      this.ids = ids
      this.currentDetailInfo = req
    },
    backList() {
      this.$emit("backDetail");
    },
    changeXY(){
      var currData = [];
      for (var i = 0; i < this.myData.length; i++) {
        var currChildArr = [];
        var childArr = this.myData[i];
        currChildArr.push(childArr[this.currentX.index]);
        currChildArr.push(childArr[this.currentY.index]);
        currChildArr[6] = childArr[6]
        currData.push(currChildArr);
      }

      var otherData = [];
      for (var i = 0; i < this.dataOther.length; i++) {
        var otherChildArr = [];
        var childArr = this.dataOther[i];
        otherChildArr.push(childArr[this.currentX.index]);
        otherChildArr.push(childArr[this.currentY.index]);
        otherChildArr[6] = childArr[6]
        otherData.push(otherChildArr);
      }

      this.option.xAxis.name = this.currentX.name;
      this.option.yAxis.name = this.currentY.name;
      this.option.series[1].data = currData;
      this.option.series[0].data = otherData;
      this.myChart.setOption(this.option, true);
    },
    initData() {
      this.openFullScreen1()
      let self = this
      //加载灯具类型
      this.$http.get("/api/lampTypes/json", {}, function(res) {
        if (res.success) {
          self.lampTypeList = res.data;
        }
      });

		  var echarts1 = document.getElementById("echat_point_other")
      echarts1.style.width=(window.innerWidth - 370)+'px';
      
      this.myChart = this.$echarts.init(echarts1);
      this.myData = [];
      this.dataOther = [];

      var itemStyle = {
        normal: {
          opacity: 0.8,
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      };

      var refTypeStr = "1,2,3,4,5"
      var temp = "";
      for (var i = 0; i < this.chooseEchatType.length; i++) {
        temp += this.chooseEchatType[i] + ",";
      }
      refTypeStr = temp.substring(0, temp.length - 1);
      var params = {
        detetionIds:this.ids,
        refTypeStr:refTypeStr,
        lampType:this.searchLampType,
      }
      var objparams = {}
      if(this.currentX.index ==0){ //功率
        objparams.powerMin = this.xMin;
        objparams.powerMax = this.xMax;
      }else if(this.currentX.index ==1){ //0
        objparams.lightIntensity1Min   = this.xMin;
        objparams.lightIntensity1Max = this.xMax;
      }else if(this.currentX.index ==2){ //左
        objparams.lightIntensity5Min    = this.xMin;
        objparams.lightIntensity5Max = this.xMax;
      }else if(this.currentX.index ==3){ //右
        objparams.lightIntensity2Min     = this.xMin;
        objparams.lightIntensity2Max = this.xMax;
      }else if(this.currentX.index ==4){ //上60
        objparams.lightIntensity8Min      = this.xMin;
        objparams.lightIntensity8Max = this.xMax;
      }else if(this.currentX.index ==5){ //下
        objparams.lightIntensity4Min      = this.xMin;
        objparams.lightIntensity4Max = this.xMax;
      }

      if(this.currentY.index ==0){ //功率
        objparams.powerMin = this.yMin;
        objparams.powerMax = this.yMax;
      }else if(this.currentY.index ==1){ //0
        objparams.lightIntensity1Min   = this.yMin;
        objparams.lightIntensity1Max = this.yMax;
      }else if(this.currentY.index ==2){ //左
        objparams.lightIntensity5Min    = this.yMin;
        objparams.lightIntensity5Max = this.yMax;
      }else if(this.currentY.index ==3){ //右
        objparams.lightIntensity2Min     = this.yMin;
        objparams.lightIntensity2Max = this.yMax;
      }else if(this.currentY.index ==4){ //上60
        objparams.lightIntensity8Min      = this.yMin;
        objparams.lightIntensity8Max = this.yMax;
      }else if(this.currentY.index ==5){ //下
        objparams.lightIntensity4Min      = this.yMin;
        objparams.lightIntensity4Max = this.yMax;
      }
      this.$http.postQueryObj(
        "/api/contestStatistics/contestIndexForSupplierJson/" +
          this.colorFlag +
          "/" +
          this.contestId,
        params,
        objparams,
        function(res) {
          self.fullscreenLoading = false;
          var data = res.data
          var length = data.indexList.length;
          var brandName = "";
          self.myData = [];
          if (data.detectionList) {
            for (var i = 0; i < data.detectionList.length; i++) {
              var detection = data.detectionList[i];
              var dataChild = [];
              dataChild.push(detection.power); //功率
              dataChild.push(detection.lightIntensity2); //0°(cd)
              dataChild.push(detection.lightIntensity5); //水平左60°(cd)
              dataChild.push(detection.lightIntensity1); //水平右60°(cd)
              dataChild.push(detection.lightIntensity8); //垂直上60°(cd)
              dataChild.push(detection.lightIntensity4); //垂直下60°(cd)
              dataChild.push(detection.posCode); //编号
              self.myData.push(dataChild);
              brandName = detection.brandName;
            }
          }

          self.dataOther = [];
          if (data.otherDetectionList) {
            for (var i = 0; i < data.otherDetectionList.length; i++) {
              var detection = data.otherDetectionList[i];
              var dataChildOther = [];
              dataChildOther.push(detection.power); //功率
              dataChildOther.push(detection.lightIntensity2); //0°(cd)
              dataChildOther.push(detection.lightIntensity5); //水平左60°(cd)
              dataChildOther.push(detection.lightIntensity1); //水平右60°(cd)
              dataChildOther.push(detection.lightIntensity8); //垂直上60°(cd)
              dataChildOther.push(detection.lightIntensity4); //垂直下60°(cd)
              dataChildOther.push(detection.posCode); //编号
              self.dataOther.push(dataChildOther);
            }
          }

          self.option = {
            backgroundColor: "#f6f6fd",
            color: ["#dd4444","#008000"],
            tooltip: {
              padding: 10,
              backgroundColor: "#222",
              borderColor: "#777",
              borderWidth: 1,
              formatter: function(obj) {
                var value = obj.value;
                var poscode = obj.data[6]
                if (obj.seriesName != "其他") {
                  return (
                    '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
                    poscode +
                    "</div>" +
                    self.currentX.name +":"+
                    // "x：" +
                    value[0] +
                    "<br>" +
                    self.currentY.name +":"+
                    // "y：" +
                    value[1] +
                    "<br>"
                  );
                } else {
                  if(poscode!=null && poscode.length>4){
				            poscode = poscode.substring(0,4)+"******";
				          }
                  return (
                    '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
                    poscode +
                    "</div>" +
                    self.currentX.name +":"+
                    // "x：" +
                    value[0] +
                    "<br>" +
                    self.currentY.name +":"+
                    // "y：" +
                    value[1] +
                    "<br>"
                  );
                }
              }
            },
            legend: {
              y: "top",
              data: [brandName, "其他"],
              textStyle: {
                // color: "#fff",
                fontSize: 16
              }
            },
            xAxis: {
              name: "功率(w)",
              nameGap: 16,
              nameTextStyle: {
                // color: "#fff",
                fontSize: 14
              },
              splitLine: {
                show: false
              },
            						scale:true,
              axisLine: {
                lineStyle: {
                  // color: "#eee"
                }
              }
            },
            yAxis: {
              name: "0°(cd)",
              //data : [],
              nameGap: 20,
            						scale:true,
              nameTextStyle: {
                // color: "#fff",
                fontSize: 16
              },
              axisLine: {
                lineStyle: {
                  // color: "#eee"
                }
              },
              splitLine: {
                show: false
              }
            },
            series: [
              {
                name: "其他",
                symbolSize: 30,
                data: self.dataOther,
                itemStyle: itemStyle,
                type: "scatter"
              },
              {
                name: brandName,
                symbolSize: 30,
                data: self.myData,
                itemStyle: itemStyle,
                type: "scatter"
              }
              
            ]
          };
          console.log(self.myChart)
          self.changeXY()
          // console.log(JSON.stringify(option))
          // if (option && typeof option === "object") {
            self.myChart.clear();
            self.myChart.setOption(self.option, true);
          // }
          setTimeout(function (){
	        	    window.onresize = function () {
	        	    	self.myChart.resize();
	        	    }
	        },200)
        }
      );
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.cassBack_three .backuy{
	top: 7px
}
.xyAxis{
	// position: absolute;
	// top:0;
	// right: 0;
	// background: rgb(246, 246, 253);
	// padding: 10px;
	// z-index: 66;
	.el-input__inner{
		height: 36px;
		line-height: 36px;
	}
	.el-form-item{
		margin-bottom: 5px;
	}
	.el-form-item__label{
		color: #333;
	}
	li:last-child{
		.el-form-item{
			margin-bottom:0;
		}
	}
}
</style>
<style>